@import '../../mixins'

.inherit-text-styles
  font-family: inherit
  font-size: inherit
  font-weight: inherit
  line-height: inherit
  letter-spacing: inherit
  text-indent: inherit
  text-align: inherit
  color: inherit

// ---
// -- Commmon
// -
.ToggleField
.SelectField
.NumField
.CountField
.TextField
  box(relative, flex)
  size(min-h: 42px)
  justify-content: space-between
  align-items: center
  flex-wrap: wrap
  padding: 0 16px
  flex-shrink: 0
  cursor: pointer
  -moz-user-select: none

  &:before
    content: ''
    box(absolute)
    pos(0, 0)
    size(100%, same)
    border-radius: 3px
    background-color: #00000012
    opacity: 0
    transition: opacity var(--d-fast)

  &:not(:first-of-type):after
    content: ''
    box(absolute)
    pos(0, 1px)
    size(calc(100% - 2px), 1px)
    background-color: var(--border-flare-fg)
    box-shadow: 0 -1px 0 0 var(--border-fg)

  &.-no-separator:after
    box(none)

  &:hover:before
    opacity: 1

  &:active:before
    transition: none
    opacity: .5

  &[data-inactive]
    opacity: .3

.ToggleField .body
.SelectField .body
.CountField .body
.TextField .body
  box(relative, flex)
  size(100%)
  justify-content: space-between
  align-items: center
  flex-wrap: nowrap

// ---
// -- Label
// -
.ToggleField .label
.SelectField .label
.TextField .label
.CountField .label
  box(relative)
  text(s: rem(16), h: 26px)
  padding: 8px 0
  align-self: flex-start
  color: var(--label-fg)
  transition: color var(--d-fast)

// ---
// -- Note
// -
.ToggleField .note
.SelectField .note
.TextField .note
  box(relative)
  text(s: rem(13)) 
  size(100%)
  margin-top: -6px
  padding: 0 0 12px 16px
  white-space: pre-wrap
  color: var(--info-fg)
  -moz-user-select: text

// ---
// -- Input
// -
.ToggleInput
.SelectInput
  box(relative, flex)
  size(max-w: calc(55% - 16px))
  justify-content: flex-end
  padding: 8px 0 8px 16px
  flex-wrap: wrap
  grid-gap: 0px 8px
  cursor: pointer

.SelectInput
  grid-gap: 0px 11px

// ---
// -- Options
// -
.ToggleInput .opt
.SelectInput .opt
  box(relative)
  text(s: rem(16))
  color: var(--inactive-fg)
  transform: translateZ(0)
  transition: color var(--d-fast)
  flex-shrink: 0
  > p
    box(relative, block)
    padding: 0
    margin: 0
  > svg
    box(relative, block)
    size(16px, same)
    padding: 4px
    fill: var(--container-fg)
    border-radius: 3px
    transition: opacity var(--d-fast)
  &:hover > svg
    opacity: .5

.SelectInput .opt:hover
  color: var(--info-fg)

.SelectInput .opt[data-active]
  color: var(--active-fg)
  &[data-none]
    color: var(--false-fg)
  > svg
    opacity: 1
    background-color: #00000016
    box-shadow: 0 0 0 1px var(--border-fg)

.ToggleInput .opt.-false
  color: var(--false-fg)

.ToggleInput[data-active] .opt
  &.-true
    color: var(--true-fg)
  &.-false
    color: var(--inactive-fg)

// ---
// -- Text input
// -
.TextInput
  box(relative)
  &:before
    content: ''
    box(absolute)
    pos(-2px, -4px)
    size(calc(100% + 4px), calc(100% + 4px))
    box-shadow: 0 1px 0 0 var(--inactive-fg)
    transform: translateZ(0)
    opacity: 0
    transition: opacity var(--d-norm), box-shadow var(--d-norm)
  &:hover:before
    opacity: .3
  &[data-active]:before
    opacity: 1
    box-shadow: 0 1px 0 0 var(--active-fg)
  &[data-valid="valid"]:before
    opacity: 1
    box-shadow: 0 1px 0 0 var(--true-fg)
  &[data-valid="invalid"]:before
    opacity: 1
    box-shadow: 0 1px 0 0 var(--false-fg)
  &[data-wrong]
    animation: shake-animation .3s, err-blink-animation .6s
  &[data-width="50"]
    width: 50%

// ---
// -- Input
// -
.TextInput input
.TextInput textarea
  @extend .inherit-text-styles
  box(relative, block)
  size(100%)
  color: var(--label-fg)
  -webkit-appearance: none
  border: none
  outline: none
  margin: 0
  padding: 0
  background-color: transparent
  resize: none
  z-index: 1

// ---
// -- Placeholder
// -
.TextInput .placeholder
  @extend .inherit-text-styles
  box(absolute)
  pos(0, 0)
  max-width: 100%
  color: var(--inactive-fg)
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  padding: 0
  margin: 0
  opacity: 0
  transform: translateX(16px)
  transition: opacity var(--d-fast), transform var(--d-fast)

.TextInput[data-empty] .placeholder
  opacity: 1
  transform: translateX(0)

.TextInput[data-active] .placeholder
  transform: translateX(3px)

// ---

// ---
// -- Number
// -
.NumField
  box(block)
  padding: 8px 16px 2px
  &.-inline
    box(flex)
    padding: 0 16px
  .label
    box(relative, flex)
    text(s: rem(16))
    justify-content: space-between
    align-items: center
    color: var(--label-fg)
    transition: color var(--d-fast)
    -moz-user-select: none
  &:hover .label
    color: var(--label-fg-hover)
  .input-group
    box(relative, flex)
    align-items: center
    padding: 8px 0
    -moz-user-select: none
  .text-input
    box(relative)
    size(100%)
    text(s: rem(16))
    margin: 0 16px 0 0
    transform: opacity var(--d-fast)
  &.-inline .text-input
    margin: 0
    text-align: right
  .unit-input
    box(relative)
    flex: 1 0 auto
    padding: 0 0 0 16px
    -moz-user-select: none
  &:not([data-active]) .text-input > input
    color: var(--inactive-fg)
  &.-inline .unit-input
    box(none)
  .toggle
    flex-shrink: 0

// ---
// -- Count field
// -
.CountField
  box(block)
  .label
    box(relative, flex)
    text(s: rem(16))
    justify-content: space-between
    align-items: center
    color: var(--label-fg)
    transition: color var(--d-fast)
    -moz-user-select: none
  &:hover .label
    color: var(--label-fg-hover)
  .input-group
    box(relative, flex)
    align-items: center
    padding: 8px 0 8px 16px
    -moz-user-select: none
  .text-input
    box(relative)
    size(100%)
    text(s: rem(16))
    margin: 0 16px 0 0
    transform: opacity var(--d-fast)
  &.-inline .text-input
    margin: 0
    text-align: right
  &:not([data-active]) .text-input > input
    color: var(--inactive-fg)
  .toggle-input
    box(relative)
    flex: 1 0 auto
    padding: 0 0 0 16px
    -moz-user-select: none

// ---
// -- Color input
// -
.ColorInput
  box(relative, flex)
  justify-content: space-between
  align-items: center

// ---
// -- Color input wrapper
// -
.ColorInput .color-wrapper
  box(relative)
  size(16px, same)
  flex-shrink: 0
  border-radius: 50%
  overflow: hidden
  margin: 0 8px 0 0
  padding: 0
  cursor: pointer
  transform: translateZ(0)
  box-shadow: 0 0 0 1px #cecece,
              0 0 0 2px #323232,
              0 1px 3px 0 #00000024

// ---
// -- Color input
// -
.ColorInput .color
  box(relative)
  size(calc(100% + 2px), same)
  pos(-1px, -1px)
  -webkit-appearance: none
  border: none
  outline: none
  margin: 0
  padding: 0
  background-color: transparent
  z-index: 0
  cursor: pointer

// ---
// -- Color rgba value
// -
.ColorInput .text
  box(relative)
  size(1px)
  color: var(--label-fg)
  -webkit-appearance: none
  border: none
  outline: none
  margin: 0
  padding: 0
  background-color: transparent
  z-index: 1
  flex-grow: 2

// ---
// -- Style field
// -
.StyleField
  box(relative)
  padding: 8px 16px 2px
  -moz-user-select: none

  &:before
    content: ''
    box(absolute)
    pos(0, 0)
    size(100%, same)
    border-radius: 3px
    background-color: #00000012
    opacity: 0
    transition: opacity var(--d-fast)

  &:not(:first-of-type):after
    content: ''
    box(absolute)
    pos(0, 1px)
    size(calc(100% - 2px), 1px)
    background-color: var(--border-flare-fg)
    box-shadow: 0 -1px 0 0 var(--border-fg)

  &.-no-separator:after
    box(none)

  &:hover:before
    opacity: 1

  &:active:before
    transition: none
    opacity: .5

// ---
// -- Label
// -
.StyleField .label
  box(relative, flex)
  text(s: rem(16))
  justify-content: space-between
  align-items: center
  color: var(--label-fg)
  transition: color var(--d-fast)

.StyleField .var
  text(monospace, s: rem(11))
  text-align: right
  margin-left: 12px
  color: var(--info-fg)

.StyleField:hover  .label
  color: var(--label-fg-hover)

// ---
// -- Container of inputs
// -
.StyleField .input-group
  box(relative, flex)
  align-items: center

// ---
// -- Color input
// -
.StyleField .color-input
  box(relative)
  size(100%)
  text(s: rem(16))
  color: var(--label-fg)
  margin: 0 16px 0 0
  transform: opacity var(--d-fast)

.StyleField:not([data-active]) .color-input
  opacity: .5

// ---
// -- Text input
// -
.StyleField .text-input
  box(relative)
  size(100%)
  text(s: rem(16))
  color: var(--label-fg)
  margin: 0 16px 0 0
  transform: opacity var(--d-fast)

// ---
// -- Toggle input
// -
.StyleField .toggle
  flex-shrink: 0
